<template>
	<div class="store-detail">
		<div class="header">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="(item, index) in bannerList" :key="index" mode="aspectFill">
					<img :src="item" class="swiper-item"/>
        </swiper-item>
      </swiper>
		</div>
		<div class="main">
			<div class="shop-info">
				<!-- <i class="sicon-1"></i> -->
				<img :src="logoImg" class="sicon-1" />
				<div class="phone" @click="makePhoneCall(storeDetail.telephone)">
					<p><i class="sicon-2"></i></p>
					<p>电话</p>
				</div>
				<h3>{{ storeDetail.storeName }}</h3>
				<p class="data">面积：{{ storeDetail.siteArea }}m²<i class="line"></i>场馆容量：{{ storeDetail.maxCapacity }}人</p>
				<p class="address" @click="goMap"><i class="hicon-4"></i>{{ provinceName + cityName + storeDetail.address }}<i class="hicon-5"></i></p>
			</div>
			<div class="store-content">
				<h2>店铺简介</h2>
				<div class="desc">
					{{ storeDetail.introduce }}
					<div class="banner-imgs">
						<p v-for="(item, index) in bannerList" :key="index"><img :src="item" class="banner-img" mode="aspectFill"/></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { storeDetailGet, getPublicUrl, listPublicUrl} from '@/api/manageApi'
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 5000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			bannerList: [
				'../../static/h3.jpg'
			],
			storeId: '',
			storeDetail: {},
			logoImg: '../../static/logo.png',
			provinceName: '',
			cityName: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad(option) {
		// console.log(option)
		this.storeId = option.id
		this.getStoreDetail(this.storeId)
	},
	methods: {
		makePhoneCall(phoneNum) {
			uni.makePhoneCall({
				phoneNumber: phoneNum
			})
		},
		goMap () {
			if(this.storeDetail.longitude && this.storeDetail.latitude){
				uni.openLocation({
					latitude: parseFloat(this.storeDetail.latitude),
					longitude: parseFloat(this.storeDetail.longitude),
					name: this.storeDetail.storeName,
					address: this.provinceName + this.cityName + this.storeDetail.address,
					success: function () {
						console.log('success')
					},
					fail: function(res) {
						console.log('调用失败：', res)
					}
				})
			}
		},
		changeSwiper(e) {
			this.changeIndex(e.detail.current)
		},
		getStoreDetail (storeId) {
      var params = {
        id: storeId
      }
			// console.log(params)
      storeDetailGet(params).then(res => {
        console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.storeDetail = data
					// 获取单个图片
					getPublicUrl({fileId:data.logoFileId}).then(response => {
						if (response.data) {
							// this.logoImg = response.data
						}
					})
					// 获取图片列表
					listPublicUrl(data.imageFileIds).then(response => {
						if (response.data) {
							this.bannerList = []
							for (var key in response.data) {
								this.bannerList.push(response.data[key])
							}
						}
					})
					this.provinceName = data.provinceName
					this.cityName = data.cityName
					// console.log(this.provinceName, this.cityName)
        }
      })
    }
	}
}
</script>

<style lang="scss">
.store-detail {
	background: #fff;
	.sicon-1{
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
		// display: inline-block;
		// background: url('../static/logo1.png') no-repeat 0 0;
		// background-size: contain;
		position: absolute;
		left: 36rpx;
		top: -30rpx;
	}
	.sicon-2{
		width: 44rpx;
		height: 44rpx;
		display: inline-block;
		background: url('../static/phone1.png') no-repeat 0 0;
		background-size: contain;
	}
	.hicon-4{
		width: 22rpx;
		height: 24rpx;
		display: inline-block;
		background: url('../../static/position.png') no-repeat 0 0;
		background-size: cover;
		vertical-align: middle;
		margin-right: 8rpx;
		margin-top: -6rpx;
	}	
	.hicon-5{
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		background: url('../../static/map.png') no-repeat 0 0;
		background-size: cover;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		margin-top: 0rpx;
	}
	.banner-imgs{
		margin-top: 17rpx;
	}
	.banner-img{
		max-width: 100%;
		max-height: 100%;
		margin: 12rpx 0;
		border-radius: 20rpx;
	}
	.header{
		width: 750rpx;
		height: 450rpx;
		.swiper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
      display: block;
			width: 100%;
			height: 100%;
      line-height: 450rpx;
      text-align: center;
    }
	}
	.main{
		border-radius: 35rpx 35rpx 0rpx 0rpx;
		padding: 30rpx 36rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: -35rpx;
		background: #fff;
		width: 100%;
		position: relative;
		.shop-info{
			width: 100%;
			box-sizing: border-box;
			h3{
				font-size: 32rpx;
				color: #1E1E1E;
				margin-bottom: 12rpx;
				margin-left: 162rpx;
			}
			.data{
				width: 364rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: #F5F5F5;
				border-radius: 18rpx;
				font-size: 22rpx;
				color: #575757;
				text-align: center;
				margin-left: 162rpx;
			}
			.line{
				width: 1rpx;
				height: 19rpx;
				background: #E4E4E4;
				display: inline-block;
				margin: 0 18rpx;
			}
			.address{
				margin-top: 39rpx;
				font-size: 26rpx;
				color: #575757;
				padding-bottom: 39rpx;
				border-bottom: 1px solid #eee;
				position: relative;
				width: 100%;
			}
			.phone{
				text-align: center;
				position: absolute;
				top: 33rpx;
				right: 34rpx;
				font-size: 22rpx;
				color: #575757;
			}
		}
		.store-content{
			h2{
				font-size: 28rpx;
				color: #1E1E1E;
				margin: 35rpx 0 29rpx;
			}
			.desc{
				font-weight: 400;
				font-size: 26rpx;
				color: #575757;
				line-height: 38rpx;
				img{
					width: 100%;
				}
			}
		}
	}
}
</style>
